@extends('layouts.app')

@section('content')



    <!--顶部-->
<script type="text/javascript">
    $(function() {
        var match = document.cookie.match(new RegExp('color=([^;]+)'));
        if(match) var color = match[1];
        if(color) {
            $('body').removeClass(function (index, css) {
                return (css.match (/\btheme-\S+/g) || []).join(' ')
            })
            $('body').addClass('theme-' + color);
        }

        $('[data-popover="true"]').popover({html: true});

    });
</script>

<script type="text/javascript">
    $(function() {
        var uls = $('.sidebar-nav > ul > *').clone();
        uls.addClass('visible-xs');
        $('#main-menu').append(uls.clone());
    });
</script>
    <div data-options="region:'center',iconCls:'icon-ok'">
            <div class="main-content">
                <div class="btn-toolbar list-toolbar">
                    <div class="form-all mg_t100">
                        <h2 class="text-center mg_b36" style="font-weight:bold;">治安保卫重点单位统计表</h2>
                         <div class="chart_btns">
                         	<button class="btn btn-default " id="tjt">查看统计图</button>
                            <button class="btn btn-default " id="shuju">数据示例</button>
                         </div>
                        <table class="table-form table-border w mg-auto tongjitu_tb" id="shili_tb2" style="margin-top: 30px;">
							<thead>
								<tr>
									<th colspan="11">治安保卫重点单位统计表</th>
								</tr>
							</thead>
							<tbody>
								<tr class="thead">
									<td>&nbsp;&nbsp;&nbsp;&nbsp;行业类别<br />所在区域</td>
									<td width="9%">党政机关</td>
									<td width="9%">卫生系统</td>
									<td width="9%">高校</td>
									<td width="9%">商场超市</td>
									<td width="9%">中小学幼儿园</td>
									<td width="9%">银行/金融机构</td>
									<td width="9%">水电油气单位</td>
									<td width="9%">重点工程</td>
									<td width="9%">其他单位</td>
									<td width="9%">合计</td>
								</tr>
								<tr class="count">
									<td>总数</td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
									<td><input type="text" /></td>
								</tr>
							</tbody>
						</table>
							<script>
								function tab_data(){
									console.log("tab表格");
									console.log(main_data_1);
									for(var i=0;i<main_data_1.tmp.length;i++){
										var inner_data = '<tr class="data_tr">'+
															 '<td>'+main_data_1.tmp[i].quju+'</td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
															 '<td><input type="text" value="" disabled/></td>'+
														 '</tr>'
										$(".count").before(inner_data)
									}

									
									var count1 = 0; 
									var count2 = 0;
									var count3 = 0;
									var type_data = [];
									for(var i=0;i<main_data_1.tmp1.length;i++){
										type_data.push(main_data_1.tmp1[i].typename)
									}

									/*for(var i=0;i<9;i++){
										console.log('1:' + type_data.indexOf($("#shili_tb2 tbody tr").eq(0).find("td").eq(i+1).html()));
										if(type_data.indexOf($("#shili_tb2 tbody tr").eq(0).find("td").eq(i+1).html()) != -1){
											console.log("2:" + $("#shili_tb2 tbody tr").eq(0).find("td").eq(i+1).html());
											for(var j=0;j<main_data_1.tmp.length;j++){
												for(var k=0;k<main_data_1.tmp[j].dt.length;k++){
													//console.log('3:' + main_data_1.tmp[flag].dt[k]);
													if(flag == main_data_1.tmp[j].dt.length){
														flag = 0;
													}
													$("#shili_tb2 tbody tr").eq(j+1).find("td").eq(i+1).find("input").val(main_data_1.tmp[flag].dt[k]);
												}
											}
											flag++;
										}
									}*/
									/*for(var i=0;i<9;i++){
											//判断表头与数据是否有对应的
										if(type_data.indexOf($("#shili_tb2 tbody tr").eq(0).find("td").eq(i+1).html()) != -1){
											console.log($("#shili_tb2 tbody tr").eq(0).find("td").eq(i+1).html());
											//当前有两组数据
											for(var j=0;j<main_data_1.tmp.length;j++){
												//循环当前城市数据dt的长度
												for(var k=0;k<main_data_1.tmp[j].dt.length;k++){
													
													$("#shili_tb2 tbody tr").eq(j+1).find("td").eq(i+1).find("input").val(main_data_1.tmp[j].dt[k]);
												}
											}
										}
									}*/
									for(var i=0;i<main_data_1.tmp.length;i++){ //2
							    		for(var j=0;j<main_data_1.tmp[0].dt.length;j++){ //3
							    			$(".tongjitu_tb .thead td").each(function(index,element){
							    				if($(this).html() == type_data[j]){
							    					console.log("相等")
							    					$(".tongjitu_tb tbody tr").eq(i+1).find("td").eq(index).find("input").val(main_data_1.tmp[i].dt[j] )
							    				}else{
							    					console.log("不相等")
							    				}
							    			})
							    		}
							    	}

								}
							</script>
                        <div id="shili_tb" class="easyui-window" closed="true">
	                        <h2 class="text-center mg_b36">治安保卫重点单位统计表（示例）</h2>
	                        <div class="chart_btns">
	                             @if($dengji == 1)
	                            <button class="btn btn-default " id="btn4">省</button>
	                            @endif

	                            @if($dengji == 1 || $dengji == 2)
	                            <button class="btn btn-default " id="btn5">市</button>
	                            @endif

	                            @if($dengji == 1 || $dengji ==2 || $dengji == 3)
	                            <button class="btn btn-default " id="btn6">区</button>
	                            @endif

	                         </div>
	                        <div id="main2" style="height:600px;width:900px;margin: 0 auto;"></div>
                        </div>
                        <div id="shili_tb1" class="easyui-window" closed="true">
	                        <h2 class="text-center mg_b36">治安保卫重点单位统计表（示例）</h2>
	                        <div class="chart_btns">
	                             @if($dengji == 1)
	                            <button class="btn btn-default " id="btn4">省</button>
	                            @endif

	                            @if($dengji == 1 || $dengji == 2)
	                            <button class="btn btn-default " id="btn5">市</button>
	                            @endif

	                            @if($dengji == 1 || $dengji ==2 || $dengji == 3)
	                            <button class="btn btn-default " id="btn6">区</button>
	                            @endif

	                         </div>
	                        <div id="main" style="height:600px;width:900px;margin: 0 auto;"></div>
                        </div>
                        <script>
                        	$("#shuju").click(function(){
	                        	$('#shili_tb').window({
									title: "编辑",
									width:'900',
									height:'600',
									minimizable:false,
									top:($(window).height() - 600) * 0.5,
									left:($(window).width() - 900) * 0.5,
									modal: true,
									closed: false,
									minimizable:false
								});
                        	})
                        	$("#tjt").click(function(){
	                        	$('#shili_tb1').window({
									title: "编辑",
									width:'900',
									height:'600',
									minimizable:false,
									top:($(window).height() - 600) * 0.5,
									left:($(window).width() - 900) * 0.5,
									modal: true,
									closed: false,
									minimizable:false
								});
                        	})
                        </script>
                  </div>
                </div>
            </div>
        </div>


<script src="{{ URL::asset('/') }}build/dist/echarts.js"></script>
<script src="{{ URL::asset('/') }}/build/zhuti.js"></script>
<script type="text/javascript">

    function area_is_exists(arr, val){
      for(var i = 0; i < arr.length; i++){
        if (arr[i].quju == val)
          return true;
      }
      return false;
    }
    function area_is_exists1(arr, val){
      for(var i = 0; i < arr.length; i++){
        if (arr[i].typename == val)
          return true;
      }
      return false;
    }


    var myChart1 = echarts.init(document.getElementById('main'),'zhuti');
    var dd = {{$dengji}};
    if({{$dengji}} == 1){
    var dwData1 = [


                    {"quju":'武汉',"dt":[17, 15, 5, 18, 9, 3,11,18,21]},
                    {"quju":"鄂州","dt":[12, 18, 13, 14,16, 19,11,11,11]},
                    {"quju":"黄石","dt":[24, 12, 18, 13, 14, 18,13,12,13]},
                    {"quju":"十堰","dt":[32, 17, 13, 12, 14, 16,12,14,14]},
                    {"quju":"襄阳","dt":[11, 15, 17, 19, 12, 14,12,12,16]},
                    {"quju":"恩施","dt":[12, 16, 13, 18, 14, 2,11,16,23]},
                    {"quju":"荆门","dt":[12, 16, 13, 18, 14, 12,12,15,21]},
                    {"quju":"公安","dt":[12, 16, 13, 18, 14, 2,11,18,16]},
                    {"quju":"老河口","dt":[14, 12, 18, 13, 14, 8,11,18,21]},
                    {"quju":"云梦","dt":[14, 12, 18, 13, 14, 8,11,18,21]},



                ];
                //var dwData1 = tb_ajax();
    }


    if({{$dengji}} == 1 || {{$dengji}} == 2 ){

    var dwData2 = [
                    {"quju":"芙蓉","dt":[17, 15, 5, 18, 9, 3,14,11,21]},
                    {"quju":"天心","dt":[16, 18, 12, 14,16, 9,11,15,11]},
                    {"quju":"鹿麓","dt":[14, 13, 13, 13, 14, 8,11,14,14]},
                    {"quju":"开福","dt":[12, 12, 14, 12, 14, 6,16,28,21]},
                    {"quju":"雨花","dt":[11, 11, 21, 12, 12, 4,16,14,25]},
                    {"quju":"高新","dt":[12, 11, 13, 11, 14, 2,11,22,23]},
                    {"quju":"长沙县","dt":[12, 11, 13, 18, 14, 2,10,12,26]},
                    {"quju":"望城区","dt":[11, 16, 13, 18, 14, 2,11,18,21]},
                    {"quju":"浏阳市","dt":[11, 12, 18, 13, 14, 8,11,12,15]},
                    {"quju":"宁乡县","dt":[14, 12, 18, 13, 14, 8,12,18,16]}
                ];
    }


    if({{$dengji}} == 1 || {{$dengji}} == 2 ||  {{$dengji}} == 3 ){
    var dwData3 = [
                    {"quju":"芙蓉1","dt":[27, 15, 5, 11, 9, 13,11,18,22]},
                    {"quju":"天心1","dt":[26, 18, 13, 15,16, 19,21,18,21]},
                    {"quju":"鹿麓1","dt":[24, 22, 18, 15, 14, 28,15,15,25]},
                    {"quju":"开福1","dt":[12, 17, 13, 15, 14, 26,11,11,24]},
                    {"quju":"雨花1","dt":[11, 15, 27, 19, 12, 24,12,14,16]},
                    {"quju":"高新1","dt":[12, 16, 13, 18, 14, 22,12,12,14]},
                    {"quju":"长沙县1","dt":[12, 16, 23, 18, 14, 22,14,24,23]},
                    {"quju":"望城区1","dt":[12, 16, 23, 18, 14, 22,10,20,30]},
                    {"quju":"浏阳市1","dt":[14, 12, 28, 13, 14, 8,21,12,32]},
                    {"quju":"宁乡县1","dt":[14, 12, 28, 13, 14, 8,11,18,20]}
                ];
    }

           if({{$dengji}} == 1){
//          var dwData = dwData1;
           }
            if({{$dengji}} == 2){
//          var dwData = dwData2;
           }
            if({{$dengji}} == 3){
//          var dwData = dwData3;
           }
//          tb1(dwData);
//          console.log(dwData);
             var urls = "{{url('admin/tj/findzabw')}}";
             var uid = "{{$uid}}";
             var main_data_1 = {};
             var dwData = [];
				function tb_ajax(id){
						main_data_1 = {};
						var data_main;
						var tmp = [];
						var tmp1 = [];
						var typename = [];
						var dt = [];
		                $.ajax({
		                type : "POST",
		                url : urls,
		                data: {'uid':uid,'id':id, '_token':'{{csrf_token()}}'},
		                dateType: 'json',
		                success : function(data){
		                	var obj = {};
		                    var obj = jQuery.parseJSON(data);
		                    console.log(obj);
		                    //取城市
		                    for(var i = 0; i<obj.city.length; i++){
		                      if (!area_is_exists(tmp, obj.city[i].name)){
		                        tmp.push({"quju":obj.city[i].name, "dt":[]});
		                      }
		                    }
		                    //取类型
		                    for(var i = 0; i<obj.city.length; i++){
		                      if (!area_is_exists1(tmp1, obj.city[i].typename)){
		                        tmp1.push({"typename":obj.city[i].typename});
		                      }
		                    }
		                    // 取统计
		                    for(var i = 0; i < tmp.length; i++){
		                        for(var j =0; j < obj.city.length; j++) {
		                          if (tmp[i].quju != obj.city[j].name){
		                            continue;
		                          }
		                          tmp[i].dt.push(obj.city[j].count);
		                        }
		                    }
							main_data_1 = {"tmp":tmp,"tmp1":tmp1}

		                	}
		            	});
       			}

			/*$("#btn1").click(function(){
                myChart1.clear();
                tb_ajax();
                setTimeout(function(){
	                var dwData = main_data_1;
	                console.log("250");
	                console.log(dwData.tmp);
	                option = {};
	                tb1(dwData);
	                myChart1.setOption(option);
                },1000)
            })*/

         function load_data(id){
         	myChart1.clear();
              tb_ajax(id);
              setTimeout(function(){
                var dwData = main_data_1;
                console.log("250");
                console.log(dwData.tmp);
                option = {};
                tab_data();
                tb1(dwData);
                myChart1.setOption(option);
              },1000)
         }


			function load_city_data_from_menu(id){
				$(".data_tr").remove()
				load_data(id);
    		}
    		function load_area_data_from_menu(id){
    			$(".data_tr").remove()
				load_data(id);
			}
			function load_org_data_from_menu(id){
				$(".data_tr").remove()
				load_data(id);
			}




         if({{$dengji}} == 1 || {{$dengji}} == 2 ){

            $("#btn2").click(function(){
                myChart1.clear();
                var dwData = dwData2;
                option = {};
                tb1(dwData);
                myChart1.setOption(option);
            })
        }

        if({{$dengji}} == 1 || {{$dengji}} == 2 ||  {{$dengji}} == 3 ){
            $("#btn3").click(function(){
                myChart1.clear();
                var dwData = dwData3;
                option = {};
                tb1(dwData);
                myChart1.setOption(option);
            })
        }

    function ooName(dwData){
            var data = [];
            console.log(dwData);
            console.log(dwData.tmp);
            for(var w=0;w<dwData.tmp.length;w++){
                data.push(dwData.tmp[w].quju);
            }
            console.log("288data");
            console.log(data);
            return data;
    }

    // 统计当前区域所有类型的总和
    function count1(dwData){
    	var count_data = dwData;
        var darr = [];
        var count = 0;
        for(var i=0;i<dwData.length;i++){

            for(var j=0;j<dwData[i].dt.length;j++){
                count += parseInt(dwData[i].dt[j]);
            }
            darr[i] = count;
            count = 0;
        }
        return darr;
    }

    //
    function datatype(dwData){
        	var dttype = [];
        	for(i=0;i<dwData.tmp1.length;i++){
        		dttype.push(dwData.tmp1[i].typename)
        	}
        	return dttype;
    }


    function oodata(dwData){
    	function dzjg(dwData,ind){
    		console.log(dwData,ind)
        	var dz = [];
        	for(var i=0;i<dwData.tmp.length;i++){
        		dz.push(dwData.tmp[i].dt[ind]);
        	}
        	return dz;
        }
        var ddata = [];
        for(var d=0;d<dwData.tmp1.length;d++){
            var cache = {name:dwData.tmp1[d].typename,type:'bar',stack: '数据',data:dzjg(dwData,d),barWidth : 50}
            console.log("342")
            console.log(d)
            console.log(dwData.tmp[d])
            ddata.push(cache);
        }
        ddata.push({name:'总数',type:'bar',stack: '数据',itemStyle:{normal:{opacity: 0}},data:count1(dwData.tmp)})
        console.log("344");
        console.log(ddata);
        return ddata;
        }
    function tb1(dwData){
            option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:datatype(dwData)
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ooName(dwData)
        }
    ],
    yAxis : [
        {
            type : 'value',
            max:10      //最大值
        }
    ],
    series : oodata(dwData)

    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
    }

</script>
<script type="text/javascript">



    var myChart2 = echarts.init(document.getElementById('main2'),'zhuti');
        var dwData4 = [
                    {"quju":"武汉","dt":[17, 15, 5, 18, 9, 3,11,18,21]},
                    {"quju":"鄂州","dt":[12, 18, 13, 14,16, 19,11,11,11]},
                    {"quju":"黄石","dt":[24, 12, 18, 13, 14, 18,13,12,13]},
                    {"quju":"十堰","dt":[32, 17, 13, 12, 14, 16,12,14,14]},
                    {"quju":"襄阳","dt":[11, 15, 17, 19, 12, 14,12,12,16]},
                    {"quju":"恩施","dt":[12, 16, 13, 18, 14, 2,11,16,23]},
                    {"quju":"荆门","dt":[12, 16, 13, 18, 14, 12,12,15,21]},
                    {"quju":"公安","dt":[12, 16, 13, 18, 14, 2,11,18,16]},
                    {"quju":"老河口","dt":[14, 12, 18, 13, 14, 8,11,18,21]},
                    {"quju":"云梦","dt":[14, 12, 18, 13, 14, 8,11,18,21]}
                ];
        var dwData5 = [
                    {"quju":"武昌区","dt":[17, 15, 5, 18, 9, 3]},
					{"quju":"洪山区","dt":[16, 18, 12, 14,16, 9]},
					{"quju":"江岸区","dt":[14, 13, 13, 13, 14, 8]},
					{"quju":"江汉区","dt":[12, 12, 14, 12, 14, 6]},
					{"quju":"硚口区","dt":[11, 11, 21, 12, 12, 4]},
					{"quju":"汉阳区","dt":[12, 11, 13, 11, 14, 2]},
					{"quju":"青山区","dt":[12, 11, 13, 18, 14, 2]},
					{"quju":"中心城区","dt":[11, 16, 13, 18, 14, 2]},
					{"quju":"东西湖区","dt":[11, 12, 18, 13, 14, 8]},
					{"quju":"蔡甸区","dt":[14, 12, 18, 13, 14, 8]},
					{"quju":"江夏区","dt":[14, 12, 18, 13, 14, 8]},
					{"quju":"黄陂区","dt":[14, 12, 18, 13, 14, 8]},
					{"quju":"新洲区","dt":[14, 12, 18, 13, 14, 8]}
        ];
        var dwData6 = [
                    {"quju":"关南派出所","dt":[27, 15, 5, 11, 9, 13]},
					{"quju":"关东派出所","dt":[26, 18, 13, 15,16, 19]},
					{"quju":"白沙洲市场派出所","dt":[24, 22, 18, 15, 14, 28]},
					{"quju":"北港派出所","dt":[12, 17, 13, 15, 14, 26]},
					{"quju":"和平派出所","dt":[11, 15, 27, 19, 12, 24]},
					{"quju":"梨园派出所","dt":[12, 16, 13, 18, 14, 22]},
					{"quju":"珞南派出所","dt":[12, 16, 23, 18, 14, 22]},
					{"quju":"马房山派出所","dt":[12, 16, 23, 18, 14, 22]},
					{"quju":"南湖派出所","dt":[14, 12, 28, 13, 14, 8]},
        ];

        if({{$dengji}} == 1){
        var dwDatas = dwData4;
        }

        if({{$dengji}} == 2){
        var dwDatas = dwData5;
        }
         if({{$dengji}} == 3){
        var dwDatas = dwData6;
        }

        $("#btn4").click(function(){
            var dwDatas = dwData4;
            option = {};
            tb2(dwDatas);
            myChart2.setOption(option);
        })
        $("#btn5").click(function(){
            var dwDatas = dwData5;
            option = {};
            tb2(dwDatas);
            myChart2.setOption(option);
        })
        $("#btn6").click(function(){
            var dwDatas = dwData6;
            option = {};
            tb2(dwDatas);
            myChart2.setOption(option);
        })
        tb2(dwDatas);

        function ooName1(dwData){
            var data = [];
            for(var i=0;i<dwData.length;i++){
                data.push(dwData[i].quju);
            }
            return data;
        };
//      ooName1(dwData);
    function count2(dwData){
        var darr = [];
        var count = 0;
        for(var i=0;i<dwData.length;i++){

            for(var j=0;j<dwData[0].dt.length;j++){
                count = count + dwData[i].dt[j]-0;
            }
            darr[i] = count;
            count = 0;
        }
        return darr;
    };
    function tb2(dwData){

            function dzjg(dwData,ind){
            var dz = [];
            for(var d=0;d<dwData.length;d++){
                dz.push(dwData[d].dt[ind]);
            }
            return dz;
        }

            option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
         data : ['党政机关','卫生、医疗系统','高校','中小学幼儿园','商场超市','银行、金融机构','水电油气单位','重点工程','其他单位']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data:ooName1(dwData)
        }
    ],
    yAxis : [
        {
            type : 'value',
            max:300      //最大值
        }
    ],
     series : [
        {
            name:'党政机关',
            type:'bar',
            stack: '数据',
            barWidth : 50,
            data:dzjg(dwData,0),
        },
        {
            name:'卫生、医疗系统',
            type:'bar',
            stack: '数据',
            data:dzjg(dwData,1),
        },
        {
            name:'高校',
            type:'bar',
            stack: '数据',
            data:dzjg(dwData,2),
        },
        {
            name:'中小学幼儿园',
            type:'bar',
            stack: '数据',
            data:dzjg(dwData,3),
        },
        {
            name:'商场超市',
            type:'bar',
            stack: '数据',
            data:dzjg(dwData,4),
        },
        {
            name:'银行、金融机构',
            type:'bar',
            stack: '数据',
            data:dzjg(dwData,5),
        },
        {
            name:'水电油气单位',
            type:'bar',
            stack: '数据',
            data:dzjg(dwData,6),
        },
        {
            name:'重点工程',
            type:'bar',
            stack: '数据',
           data:dzjg(dwData,7),
        },
         {
            name:'其他单位',
            type:'bar',
            stack: '数据',
            data:dzjg(dwData,8),
        },
        {
            name:'合计',
            type:'bar',
            stack: '数据',
            itemStyle:{
                normal:{
                    color:'rgba(128, 128, 128, 0)'
                }
            },
            data:count2(dwData)
        }
    ]

    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option);
      }
      

      //载入初始化数据
      load_data();

</script>


@stop
